<script src="../../js/gongju/PaiPan.js"></script>

<template>
  <div id="app" class="qimenpaipan">
    <div class="margins">
      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-color-wand" />
              工具
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              紫微斗数排盘
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 更多工具 -->
        <div class="prediction">
          更多工具：
          <span class="spacing">
            <router-link to="/gongju/qimendunjia">
              奇门排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/bazi">
              八字排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/liuyao">
              六爻起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span>
            <router-link to="/gongju/meihuayishu">
              梅花易数起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
        </div>
        <div class="morePrediction">
          <el-dropdown :hide-on-click="true">
            <span class="el-dropdown-link">
              更多工具
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link to="/gongju/qimendunjia">
                    奇门排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/bazi">
                    八字排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/liuyao">
                    六爻起卦
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/meihuayishu">
                    梅花易数起卦
                    <Icon type="ios-open-outline" />
                  </router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <!-- <div v-if="!dataDStatus">
        <el-empty description="努力加载中">
          <Button
            v-if="reLoadingButton"
            @click="starts(true)"
            class="reLoading-button"
            >重新加载</Button
          >
          <Button v-else loading class="reLoading-button">加载中...</Button>
        </el-empty>
      </div> -->
      <div>
        <div id="root">
          <div class="css-1qhpsh8 ant-app">
            <main>
              <div class="container">
                <div id="astrolabe" class="astrolabe-container">
                  <div
                    class="iframe-container"
                    :style="{ width: divWidth - 40 + 'px' }"
                  >
                    <iframe
                      id="storybook-preview-iframe"
                      :key="upkey"
                      title="storybook-preview-iframe"
                      :src="linkScr"
                      allow="clipboard-write;"
                      allowfullscreen=""
                      data-is-loaded="true"
                      scrolling="no"
                      style="
                        width: 789px;
                        height: 789px;
                        border: unset;
                        margin: auto;
                        display: flex;
                      "
                      v-if="linkScr"
                    ></iframe>

                    <div class="css-o9lge2 ant-empty" v-else>
                      <div class="ant-empty-description">
                        <span
                          class="logo"
                          style="
                            font-size: 18px;
                            opacity: 0.6;
                            margin-top: -120px;
                          "
                          >输入信息点击`排盘`按钮获取专属星盘</span
                        >
                      </div>
                    </div>
                  </div>

                  <div class="form-container">
                    <form class="ant-form ant-form-vertical css-o9lge2">
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div class="ant-col ant-form-item-label css-o9lge2">
                            <label
                              for="birthdayType"
                              class="ant-form-item-required"
                              title="日期类型"
                              >日期类型</label
                            >
                          </div>
                          <el-radio-group v-model="birthdayType">
                            <el-radio-button label="阳历"></el-radio-button>
                            <el-radio-button label="农历"></el-radio-button>
                          </el-radio-group>
                          <!-- <div class="ant-col ant-form-item-control css-o9lge2">
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <div
                                  aria-required="true"
                                  class="ant-radio-group ant-radio-group-solid css-o9lge2"
                                  id="birthdayType"
                                >
                                  <label
                                    class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item css-o9lge2"
                                    ><span
                                      class="ant-radio-button ant-radio-button-checked"
                                      ><input
                                        class="ant-radio-button-input"
                                        type="radio"
                                        value="solar"
                                        checked="" /><span
                                        class="ant-radio-button-inner"
                                      ></span></span
                                    ><span>阳历</span></label
                                  ><label
                                    class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item css-o9lge2"
                                    ><span class="ant-radio-button"
                                      ><input
                                        class="ant-radio-button-input"
                                        type="radio"
                                        value="lunar" /><span
                                        class="ant-radio-button-inner"
                                      ></span></span
                                    ><span>农历</span></label
                                  >
                                </div>
                              </div>
                            </div>
                          </div> -->
                        </div>
                      </div>
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div class="ant-col ant-form-item-label css-o9lge2">
                            <label
                              for="birthday"
                              class="ant-form-item-required"
                              title="生日"
                              >生日<span
                                role="img"
                                aria-label="question-circle"
                                title=""
                                class="anticon anticon-question-circle ant-form-item-tooltip"
                                ><svg
                                  viewBox="64 64 896 896"
                                  focusable="false"
                                  data-icon="question-circle"
                                  width="1em"
                                  height="1em"
                                  fill="currentColor"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                                  ></path>
                                  <path
                                    d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                                  ></path></svg></span
                            ></label>
                          </div>
                          <div class="ant-col ant-form-item-control css-o9lge2">
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <input
                                  placeholder="阳历生日"
                                  id="birthday"
                                  aria-required="true"
                                  class="ant-input css-o9lge2 ant-input-outlined"
                                  type="text"
                                  value=""
                                  style="width: 100%"
                                  v-model="birthday"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        style="
                          max-height: 0px;
                          overflow: hidden;
                          transition: max-height 0.25s ease-in-out;
                        "
                      >
                        <div class="ant-form-item css-o9lge2">
                          <div class="ant-row ant-form-item-row css-o9lge2">
                            <div
                              class="ant-col ant-form-item-control css-o9lge2"
                            >
                              <div class="ant-form-item-control-input">
                                <div
                                  class="ant-form-item-control-input-content"
                                >
                                  <label
                                    class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-o9lge2"
                                    ><span
                                      class="ant-checkbox ant-wave-target css-o9lge2"
                                      ><input
                                        id="isLeap"
                                        class="ant-checkbox-input"
                                        type="checkbox" /><span
                                        class="ant-checkbox-inner"
                                      ></span></span
                                    ><span>是否闰月</span></label
                                  >
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div class="ant-col ant-form-item-label css-o9lge2">
                            <label
                              for="birthTime"
                              class="ant-form-item-required"
                              title="时辰"
                              >时辰<span
                                role="img"
                                aria-label="question-circle"
                                title=""
                                class="anticon anticon-question-circle ant-form-item-tooltip"
                                ><svg
                                  viewBox="64 64 896 896"
                                  focusable="false"
                                  data-icon="question-circle"
                                  width="1em"
                                  height="1em"
                                  fill="currentColor"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                                  ></path>
                                  <path
                                    d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                                  ></path></svg></span
                            ></label>
                          </div>
                          <div class="ant-col ant-form-item-control css-o9lge2">
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <div
                                  class="ant-select ant-select-outlined ant-select-in-form-item css-o9lge2 ant-select-single ant-select-show-arrow"
                                  aria-required="true"
                                >
                                  <!-- popper-class="select-birth" -->
                                  <el-select
                                    v-model="birthTime"
                                    placeholder="请选择"
                                    :popper-append-to-body="false"
                                  >
                                    <el-option
                                      v-for="item in timeDetailList"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div class="ant-col ant-form-item-label css-o9lge2">
                            <label
                              for="gender"
                              class="ant-form-item-required"
                              title="性别"
                              >性别</label
                            >
                          </div>
                          <div class="ant-col ant-form-item-control css-o9lge2">
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <div
                                  class="ant-radio-group ant-radio-group-outline css-o9lge2"
                                  id="gender"
                                >
                                  <el-radio v-model="gender" label="male"
                                    >男</el-radio
                                  >
                                  <el-radio v-model="gender" label=""
                                    >女</el-radio
                                  >
                                  <!-- <label
                                    class="ant-radio-wrapper ant-radio-wrapper-in-form-item css-o9lge2"
                                    ><span class="ant-radio ant-wave-target"
                                      ><input
                                        class="ant-radio-input"
                                        type="radio"
                                        value="male" /><span
                                        class="ant-radio-inner"
                                      ></span></span
                                    ><span>男</span></label
                                  ><label
                                    class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-o9lge2"
                                    ><span
                                      class="ant-radio ant-wave-target ant-radio-checked"
                                      ><input
                                        class="ant-radio-input"
                                        type="radio"
                                        value="female"
                                        checked="" /><span
                                        class="ant-radio-inner"
                                      ></span></span
                                    ><span>女</span></label
                                  > -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div class="ant-col ant-form-item-label css-o9lge2">
                            <label for="name" class="" title="名字">名字</label>
                          </div>
                          <div class="ant-col ant-form-item-control css-o9lge2">
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <input
                                  id="name"
                                  class="ant-input css-o9lge2 ant-input-outlined"
                                  type="text"
                                  value=""
                                  v-model="className"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="ant-form-item css-o9lge2">
                        <div class="ant-row ant-form-item-row css-o9lge2">
                          <div
                            class="ant-col ant-col-24 ant-form-item-control css-o9lge2"
                          >
                            <div class="ant-form-item-control-input">
                              <div class="ant-form-item-control-input-content">
                                <el-button
                                  @click="search"
                                  class="ant-btn css-o9lge2 ant-btn-primary ant-btn-lg ant-btn-block"
                                  :disabled="!birthday || !birthTime"
                                >
                                  <span>排 盘</span>
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div></div>
                    </form>
                  </div>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
::v-deep .el-select-dropdown__item .is-selected {
  background-color: #531dab !important;
  color: #000 !important;
}
</style>
<style scoped lang="less" src="@/css/gongju/qimenpaipan.scss"></style>
<style scoped lang="less" src="@/css/gongju/index.css"></style>
<style scoped>
.form-container {
  margin-bottom: 20px;
  position: relative;
}

@media (max-width: 375px) {
  .astrolabe-container {
    grid-template-columns: auto;
  }
  .iframe-container {
    width: 320px;
    height: 500px;
    overflow: auto;
    border: 1px solid #ccc;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 375px) and (max-width: 576px) {
  .astrolabe-container {
    grid-template-columns: auto;
  }
  .iframe-container {
    width: 350px;
    height: 500px;
    overflow: auto;
    border: 1px solid #ccc;
    margin: auto;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .astrolabe-container {
    grid-template-columns: auto;
  }
  .iframe-container {
    width: 350px;
    height: 500px;
    overflow: auto;
    border: 1px solid #ccc;
    margin: auto;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .astrolabe-container {
    grid-template-columns: auto;
  }
  .iframe-container {
    width: 350px;
    height: 500px;
    overflow: auto;
    border: 1px solid #ccc;
    margin: auto;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .astrolabe-container {
    grid-template-columns: auto;
  }
  .iframe-container {
    width: 350px;
    height: 500px;
    overflow: auto;
    border: 1px solid #ccc;
    margin: auto;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .iframe-container {
    width: 100% !important;
    height: 100%;
    border: unset;
    overflow: hidden;
  }
  #storybook-preview-iframe {
    width: 100% !important;
    height: 100%;
    border: unset;
    overflow: hidden;
  }
  .logo {
    margin: unset !important;
    position: absolute;
    top: 38%;
    left: 0;
    right: 20%;
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped>
::v-deep .el-radio__input.is-checked .el-radio__inner {
  /* color:#531dab */
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
/* Modify hover color */
.el-select-dropdown__item:hover {
  background-color: #f5f5f5;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
::v-deep .el-select-dropdown__item:hover {
  background-color: #531dab;
  color: #fff; /* Optional: change text color */
}

/* Additional styles for other elements */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
::v-deep .el-checkbox-button__inner:hover {
  color: #531dab;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: #531dab;
  border-color: #531dab;
  color: #fff;
}
::v-deep .el-radio-button__inner:hover {
  color: #531dab;
}
::v-deep .el-select-dropdown__item .is-selected {
  background-color: #531dab !important;
  color: #000 !important;
}
</style>
